<template>
  <continer>
    <template slot="content">
      <el-form
        class="m7-form"
        :label-position="labelPosition"
        :model="formData"
        size="mini"
        :rules="rules"
        ref="nodeForm">
        <el-form-item label="节点名称" prop="name">
          <el-input v-model="formData.name" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="服务机器人" prop="robotId">
          <m7Select
            size="mini"
            v-model="formData.robotId"
            :placeholder="'服务机器人'"
            filterable
            :multiple="false"
            :collapse-tags="false"
            :options="robotList"
            :defaultProps="{ label: 'robotName', value: 'robotId' }">
          </m7Select>
        </el-form-item>
        <el-form-item prop="isShowTransfer">
          <span slot="label">
            是否展示转人工按钮
            <el-tooltip class="item" effect="dark" content="访客通过转人工按钮直接转人工将转向默认转向配置" placement="top">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
          </span>
          <el-radio v-model="formData.isShowTransfer" :label="true">是</el-radio>
          <el-radio v-model="formData.isShowTransfer" :label="false">否</el-radio>
        </el-form-item>
        <div class="select-group" v-for="(item, index) in condition"
          v-show="index !== condition.length - 1" :key="index">
          <div class="select-box">
            <el-form-item :label="'关键词' + (index + 1)" prop="region">
              <span slot="label">
                {{'关键词' + (index + 1)}}
                <el-tooltip class="item" effect="dark" content="触发词请与机器人后台的转人工配置的触发词保持一致" placement="top" v-if="index === 0">
                  <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
                </el-tooltip>
              </span>
              <el-input v-model="item.value" @input="selectChange(item.value, index)" :maxlength='12' placeholder="关键词名称(12个字符以内)"></el-input>
            </el-form-item>
          </div>
          <div class="select-box">
            <el-form-item :label="'节点'" prop="region">
              <el-select
                size="mini"
                v-model="item.to"
                placeholder="请选择下一步节点"
                style="width: 100%"
                clearable>
                <el-option
                  v-for="node in nodeList"
                  :label="node.data.name"
                  :value="node.id"
                  v-show="!node.viewOnly && node.id !== currentData.id"
                  :key="node.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="select-oprate">
            <span @click="deleteCondition(item, index)"><i class="V7_iconfont V7_iconV7tubiao-109 delete-span"></i></span>
          </div>
        </div>
        <div class="addCondition">
          <span @click="addCondition"><i class="V7_iconfont V7_iconV7tubiao_xinzeng add-span"></i>增加条件</span>
        </div>
        <div class="select-group">
          <div class="select-box">
            <el-form-item :label="'默认'">
              <span slot="label">
                默认
                <el-tooltip class="item" effect="dark" content="未命中上述关键字时默认转向" placement="top">
                  <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
                </el-tooltip>
              </span>
              <el-select placeholder="默认转向" size="mini" disabled :value="'默认'" style="width: 100%">
              </el-select>
            </el-form-item>
          </div>
          <div class="select-box">
            <el-form-item :label="'节点'" prop="default">
              <el-select
                size="mini"
                v-model="formData.default"
                placeholder="请选择下一步节点"
                style="width: 100%"
                clearable
                @change='defaultChange'
                filterable>
                <el-option
                  v-for="node in nodeList"
                  v-show="!node.viewOnly && node.id !== currentData.id"
                  :label="node.data.name"
                  :value="node.id"
                  :key="node.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="select-oprate">
            <span><i class="V7_iconfont V7_iconV7tubiao-109 delete-span" style="opacity: 0"></i></span>
          </div>
        </div>
      </el-form>
    </template>
    <template slot="oprate">
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template slot="remove">
      <el-button @click="deleteNode" type='danger' size="mini">删除</el-button>
    </template>
  </continer>
</template>
<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import continer from '@/components/configCommon/ui-modules/drawer-container.vue'
import nodeEidtMixins from './nodeEidtMixins'
@Component({
  name: 'im-node-robot',
  components: { continer }
})
export default class extends Mixins(nodeEidtMixins) {
  private $store: any

  private addCondition () {
    console.log(this.condition.length)
    this.condition.splice(this.condition.length - 1, 0, {
      label: '',
      value: '',
      to: ''
    })
  }

  private selectChange (name: string, index: number): void {
    this.condition[index].label = name
  }

  private defaultChange (value: any) {
    this.condition[this.condition.length - 1].to = value
  }
}
</script>
<style lang="stylus" scoped>
.select-oprate
  span
    padding-top 36px
    display block
    color $icon-gray
    cursor pointer
.addCondition
  display flex
  align-items center
  color $c-main
  cursor pointer
  margin-bottom 15px
  i
    font-size 12px
.delete-span
  &:hover
    color $c-danger
.add-span
  &:before
    margin-right 4px
.tip-span
  color $icon-gray
  font-size 12px
  cursor pointer
</style>
